<!--<div style="padding: 10px" >-->
<!--<nz-steps nzSize="small" [(nzCurrent)]="tabIndex" nzProgressDot>-->
<!--<nz-step nzTitle="试卷设置"></nz-step>-->
<!--<nz-step nzTitle="题目设置"></nz-step>-->
<!--&lt;!&ndash;<nz-step nzTitle="详情设置"></nz-step>&ndash;&gt;-->
<!--</nz-steps>-->
<!--</div>-->
<form nz-form style="padding: 10px" [formGroup]="validateForm">
  <nz-tabset [(nzSelectedIndex)]="tabIndex">
    <nz-tab nzTitle="试卷设置">
      <div nz-row>
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="12" nzRequired nzFor="paperName" maxlength="50">试卷标题</nz-form-label>
          <nz-form-control [nzSm]="8" [nzXs]="12">
            <input nz-input formControlName="paperName" [(ngModel)]="paperName">
            <nz-form-explain *ngIf="validateForm.get('paperName').dirty &&validateForm.get('paperName').errors">请输入商品名称
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="12" nzFor="describe" maxlength="200">
            试卷描述
          </nz-form-label>
          <nz-form-control [nzSm]="8" [nzXs]="12">
            <textarea rows="3" nz-input formControlName="describe" [(ngModel)]="describe"></textarea>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item nz-row style="margin-bottom:8px;">
          <nz-form-control [nzSpan]="14" [nzOffset]="21">
            <a (click)="nextTab()">下一步</a>
          </nz-form-control>
        </nz-form-item>
      </div>
    </nz-tab>
    <nz-tab nzTitle="选题设置">
      <div *ngIf="knowledgeListValue!=undefined">
        <nz-form-item>
          <button nz-button [nzType]="'primary'" (click)="showModal()"><span>选择考点</span></button>
          <nz-modal [(nzVisible)]="isVisible" nzTitle="请选择测试知识点" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
                    nzWidth="800px">
            <nz-select style="width: 90%" nzSize="large" nzMode="multiple" nzPlaceHolder="请选择"
                       formControlName="knowledgeListValue" [(ngModel)]="knowledgeListValue">
              <nz-option *ngFor="let option of knowledgeList" [nzDisabled]="option.questionAllNum>0?false:true"
                         [nzLabel]="option.knowledgeName+'  (共'+option.questionAllNum+'道试题）'"
                         [nzValue]="option.knowledgeName"></nz-option>
            </nz-select>
          </nz-modal>
        </nz-form-item>

        <div *ngFor="let question of autoPaperQuestionNumList; let i = index">
          <ul id="selected-category-list">
            <li class="random-cate-li">
        <span class="qts-cate-name main" (click)="extendChangeShow(i,question.knowledgeName)">{{question.knowledgeName}}
          <span>({{question.questionAllNum}}
            道试题)</span></span>
              <span>抽选</span>
              <span class="qts-count first" *ngIf="!extendOption[i].extend&&!isChoiceByTypeOption[i].isChoice||question.questionChoiceNum<=0">
          <input nz-input value="0" type="number" min="0" max="{{question.questionAllNum}}"
                 (ngModelChange)="changeChoiceNum(i,$event)" [formControlName]="numOption[i].num"
                 style="display: inline-block; width: 80px;">

          </span>
              <span (click)="extendChangeShow(i,question.knowledgeName)" class="qts-count first"
                    *ngIf="extendOption[i].extend||isChoiceByTypeOption[i].isChoice"><span
                style="font-weight: 700">{{question.questionChoiceNum}}</span></span>
              <span>道试题</span>
              <span class="qts-score first" style="padding-left: 28px; display: inline;"
                    *ngIf="!extendOption[i].extend&&!isChoiceByTypeOption[i].isChoice||question.questionChoiceNum<=0">每题  
          <input nz-input type="number" [formControlName]="scoreOption[i].score"
                 (ngModelChange)="changeAllScore(i,$event)" class="form-control"
                 style="display:inline-block; width:80px;" value="1" min="1"> 分
          </span>

              <span (click)="extendChangeShow(i,question.knowledgeName)" class="qt-lists"
                    *ngFor="let questionType of question.questionTypeNumList">
            <b class="badge badge-primary" *ngIf="questionType.typeQuestionChoiceNum>0">{{questionType.questionType}}
               {{questionType.typeQuestionChoiceNum}}
            </b> 
          </span>

              <!--<span class="qts-score first" style="padding-left: 28px; display: inline;"-->
              <!--*ngIf="extendOption[i].extend||isChoiceByTypeOption[i].isChoice">每题<span style="font-weight: 700"x>{{question.choiceScore}}</span>分</span>-->
              <span (click)="extendChangeShow(i,question.knowledgeName)" class="category-total-score"
                    style="padding-left: 28px;"> 总共<span style="font-weight: 700">{{question.allScore}}</span>分 </span>
              <span (click)="extendChangeShow(i,question.knowledgeName)" *ngIf="!extendOption[i].extend"
                    style="float:right;">展开</span>
              <span (click)="extendChangeShow(i,question.knowledgeName)" *ngIf="extendOption[i].extend"
                    style="float:right;">收起</span>
              <div class="selected-category-expand-details" *ngIf="extendOption[i].extend">
                <nz-divider></nz-divider>
                <div class="tab-content">
                  <div class="tab-pane active" data-type="0" id="selectQuestionFromBank213719">
                    <div class="can-selected-questions-count">1.选择筛选条件 <span class="all-count-tips">当前选择共包含 <span
                      class="all-count-num">{{question.questionAllNum}}</span> 题</span></div>
                    <div class="selected-diff-level clearfix">
                      <div class="pull-left random-diff-level-select">
                        <span style="color: #666">请选择难易程度: </span>
                        <nz-radio-group [nzButtonStyle]="'solid'" [formControlName]="difficultyOption[i].difficulty" (ngModelChange)="difficultyChange(i,question,$event)">
                          <label nz-radio-button nzValue="简单">简单</label>
                          <label nz-radio-button nzValue="较难">较难</label>
                          <label nz-radio-button nzValue="很难">很难</label>
                        </nz-radio-group>
                      </div>
                    </div>
                    <div>
                      <div class="selected-questions-count-and-points">2.选择抽取题型和分数 <span class="sele-tips">将随机抽取 <span
                        class="select-count">{{question.questionChoiceNum}}</span> 题，共 <span class="select-point">{{question.allScore}}</span> 分</span></div>
                      <div class="category-select-box">

                        <div class="qt-counts-list" style="">
                          <div class="question-type-item" *ngFor="let questionType of question.questionTypeNumList; let j = index">
                      <span class="qts-cate-name">{{questionType.questionType}} <span
                        style="color:#999">({{questionType.typeQuestionNum}} 道试题)</span></span>
                            <span>抽选</span>
                            <span class="qts-count">
                        <input value="0" type="number" min="0" max="{{questionType.typeQuestionNum}}"
                               [formControlName]="numPackage[i][j].typeNum"
                               (ngModelChange)="changeTypeNumOption(i,j,$event)" data-qtid="1" class="form-control"
                               style="display:inline; width: 80px;"></span>
                            <span>道试题</span><span style="padding-left: 28px;">每题 </span>
                            <span class="qts-score">
                      <input nz-input type="number" value="1" min="1" [formControlName]="scorePackage[i][j].typeScore"
                             (ngModelChange)="changeTypeScoreOption(i,j,$event)"
                             class="form-control" style="display:inline-block; width:80px;"></span><span> 分</span></div>

                        </div>
                      </div>
                    </div>
                  </div>


                </div>
              </div>
            </li>

          </ul>
        </div>

        <nz-form-item nz-row style="margin-bottom:8px;">
          <nz-form-control [nzSpan]="14" [nzOffset]="21">
            <a (click)="lastTab()">上一步</a>
            <nz-divider nzType="vertical"></nz-divider>
            <button nz-button class="login-form-button" [nzLoading]="!isCheck" nzType="primary" (click)="submitForm()">提交</button>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div *ngIf="knowledgeListValue==undefined">
        <nz-form-item>
          <button nz-button [nzType]="'primary'" (click)="showModal()"><span>选择考点</span></button>
          <nz-modal [(nzVisible)]="isVisible" nzTitle="请选择测试知识点" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
                    nzWidth="800px">
            <nz-select style="width: 90%" nzSize="large" nzMode="multiple" nzPlaceHolder="请选择"
                       formControlName="knowledgeListValue" [(ngModel)]="knowledgeListValue">
              <nz-option *ngFor="let option of knowledgeList" [nzDisabled]="option.questionAllNum>0?false:true"
                         [nzLabel]="option.knowledgeName+'  (共'+option.questionAllNum+'道试题）'"
                         [nzValue]="option.knowledgeName"></nz-option>
            </nz-select>
          </nz-modal>
        </nz-form-item>
      </div>

    </nz-tab>

  </nz-tabset>

</form>
<style>
  .form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  }
  ul#selected-category-list .question-type-item {
    line-height: 40px;
  }
  .qts-cate-name {
    min-width: 300px;
    display: inline-block;
    cursor: pointer;
    margin-left: 16px;
  }
  .selected-questions-count-and-points {
    line-height: 30px;
    margin-top: 20px;
  }

  .selected-questions-count-and-points .sele-tips {
    color: #FF962A;
  }

  .pull-left {
    float: left !important;
  }

  .random-diff-level-select {
    margin-right: 120px;
    margin-left: 15px;
  }

  .selected-diff-level .btn-group-circle {
    margin-left: 10px;
  }

  .btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }

  .selected-diff-level .btn-group-circle .btn-default {
    padding: 3px 20px;
    font-size: 13px;
  }

  .can-selected-questions-count .all-count-tips, .selected-questions-count-and-points .sele-tips {
    color: #FF962A;
  }

  .can-selected-questions-count {
    line-height: 30px;
    margin-bottom: 13px;
  }

  .qts-random-select-question .qt-lists b.badge {
    background-color: white !important;
    height: 21px;
  }

  .qts-random-select-question .badge-primary, .qts-random-select-question .badge-danger {
    color: #56aafd;
    border: 1px solid #56aafd;
  }

  .badge-primary {
    color: #56aafd;
    border: 1px solid #56aafd;
  }

  .badge {
    font-size: 11px !important;
    font-weight: 300;
    padding: 3px 6px 3px 6px;
    border-radius: 12px !important;
    text-shadow: none !important;
    text-align: center;
    vertical-align: middle;
  }

  .badge {
    display: inline-block;
    min-width: 10px;
    line-height: 1;
    white-space: nowrap;
    background-color: white !important;
    height: 21px;
  }

  [nz-form][_ngcontent-c7] {
    max-width: 100%;
  }

  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }

  .dynamic-delete-button:hover {
    color: #777;
  }

  [nz-form] {
    max-width: 600px;
  }

  #selected-category-list li.random-cate-li {
    display: block;
    min-height: 70px;
    padding-top: 17px;
    border-radius: 4px !important;
    box-shadow: 0px 1px 4px 2px rgba(255, 255, 255, 0);
    border: 1px solid rgba(230, 230, 230, 1);
    margin-right: 16px;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
    padding-right: 10px;
    /*margin-left: 30px;*/
  }

  .qts-cate-name {
    min-width: 300px;
    display: inline-block;
    cursor: pointer;
    margin-left: 16px;
  }

  div, input, select, textarea, span, img, table, label, td, th, p, a, button, ul, code, pre, li {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
  }

  #selected-category-list li.random-cate-li {
    display: block;
    min-height: 70px;
    padding-top: 17px;
    border-radius: 4px !important;
    box-shadow: 0px 1px 4px 2px rgba(255, 255, 255, 0);
    border: 1px solid rgba(230, 230, 230, 1);
    margin-right: 16px;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
    padding-right: 10px;
    /*margin-left: 30px;*/
  }

  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }
</style>

